<template>
	<u-navbar title="服务通知" :autoBack="true"
		titleStyle="color:#d1f5f8;margin-left:-65%;margin-top:-0.5%;font-size:30rpx;" leftIconSize="30rpx"
		leftIconColor="#d1f5f8" placeholder bgColor="#01a7f4" height="75rpx" />
	<view>
		<u-text text="服务记录" bold align="center" size="35rpx" margin="20rpx 0 0 0"></u-text>
		<view class="box" v-for="p in serviceList" :key="p.serveId">
			<text class="title">{{p.type}}</text>
			<text class="status">{{p.status}}</text>
			<text class="time">{{p.serveTime}}</text>
		</view>
		<!-- 提示该列表为空内容 -->
		<u-empty mode="list" v-show="serviceList.length == 0" />
	</view>
</template>

<script setup>
	import {
		computed,
		onMounted
	} from "vue";
	import {
		useServiceStore
	} from "@/stores/serviceStore.js"
	const serviceStore = useServiceStore();
	const serviceList = computed(() => {
		return serviceStore.serviceList;
	})
	onMounted(async () => {
		let user = JSON.parse(uni.getStorageSync("user"));
		await serviceStore.getServiceList(user.userId)
	})
</script>

<style lang="scss">
	page {
		background-image: url('/static/images/service-bg.jpg');
		background-size: 100vw 100vh;
		width: 100vw;
		height: 100vh;
		background-attachment: fixed;

		/*设置背景图片静止 */
		.box {
			position: relative;
			width: 100%;
			height: 150rpx;
			margin: 0 auto;
			border-radius: 20rpx;
			margin-top: 30rpx;

			// background-color: rgba(0, 168, 243, 0.2);
			width: 95%;
			padding: 20rpx;
			background-color: rgba(255, 255, 255, 0.8);
			box-shadow: 10rpx 10rpx 10rpx rgba(0, 0, 0, 0.2);
			background: linear-gradient(to right, #25aff3, #a0e3f3);
			display: flex;
			justify-content: space-between;
			font-weight: bold;

			.time {
				position: absolute;
				bottom: 10rpx;
				right: 10rpx;
				color: #0b5379
			}


		}

	}
</style>